import React, { Component } from "react";
import { apiGetOrderDetails } from "@/request/orderManagement";
import GoBack from "@/components/TheGoBack";
import { Table } from "antd";
import "../style/style.less";
import TheImage from "@/components/TheImage";

class Details extends Component {
  state = {
    dataSource: null,
    productType:true,
    columns: [
      {
        title: "商品信息",
        render: (text, record) => {
          return (
            <div style={{ display: "flex", alignItems: "center" }}>
              <TheImage
                src={record.productImage}
                width={100}
              />
              <span style={{ margin: "0 10px" }}>{record.productName}</span>
              <span>{record.sku}</span>
            </div>
          );
        },
      },
      {
        title: "商品单价",
        dataIndex: "orderPrice",
        key: "orderPrice",
        render: (text) => <React.$price price={text || 0} />,
      },
      {
        title: "商品数量",
        dataIndex: "orderProductCount",
        key: "orderProductCount",
        render: (text) => text || 0,
      },
      {
        title: "总计",
        dataIndex: "orderPriceTotal",
        key: "orderPriceTotal",
        render: (text) => <React.$price price={text || 0} />,
      },
    ],
  };

  async componentDidMount() {
    await this.getDetails();
  }

  getDetails = async () => {
    const orderId = this.props.match.params.id;
    const response = await apiGetOrderDetails({ orderId });
    if (response.code === 0) {
      const dataSource = response.data;
      let payWay = ''
      switch (dataSource.payWay) {
        case 'WeChat':
          payWay = '微信'
          break;
        case 'Alipay':
          payWay = '支付宝'
          break;
        case 'UnionPay':
          payWay = "银联"
          break;
        case 'YsPay':
          payWay = "银行卡"
          break;
        default:
          payWay = "未知支付方式"
      }
      let pickupWay = ""
      switch (dataSource.pickupWay) {
        case 'D':
          pickupWay = "到店自取"
          break;
        case 'T':
          pickupWay = '同城配送'
          break
        default:
          pickupWay = "未知配送方式"
      }
      let orderState = ''
      switch (dataSource.orderState) {
        case '2':
          orderState = "未使用"
          break
        case '3':
          orderState = "待接单"
          break
        case '9':
          orderState = "已使用"
          break
        default:
          orderState = "未知订单状态"
      }
      const detailsData = [
        {
          title: "订单编号",
          value: dataSource.orderCode,
        },
        {
          title: "买家ID",
          value: dataSource.memberId,
        },
        {
          title: "支付方式",
          value: payWay,
        },
        {
          title: "订单金额",
          value: <React.$price price={dataSource.orderTotalPrice || 0} />,
        },
        {
          title: "实付金额",
          value: <React.$price price={dataSource.orderPayPrice || 0} />,
        },
        {
          title: "下单时间",
          value: dataSource.createTime,
        },
        {
          title: "买家昵称",
          value: dataSource.orderMemberName,
        },
        {
          title: "收货方式",
          value: pickupWay,
        },
        {
          title: "订单状态",
          value: orderState,
        },
        {
          title: "使用日期",
          value: dataSource.finishTime,
        },
        {
          title: "获赠积分",
          value: dataSource.presentIntegral || 0,
        },
      ];
      const orderDetailList = dataSource.orderDetailList.filter(v => {
        let productSkuJson = JSON.parse(v.productSkuJson)
        const { skuAttribute } = productSkuJson;
        if (!skuAttribute) {
          if(JSON.stringify(productSkuJson) ==='{}') 
          this.setState({
            columns: [
              {
                title: "服务信息",
                render: (text, record) => {
                  return (
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <TheImage
                        src={record.productImage}
                        width={100}
                      />
                      <span style={{ margin: "0 10px" }}>{record.productName}</span>
                      <span>{record.sku}</span>
                    </div>
                  );
                },
              },
              {
                title: "服务单价",
                dataIndex: "orderPrice",
                key: "orderPrice",
                render: (text) => <React.$price price={text || 0} />,
              },
              {
                title: "服务数量",
                dataIndex: "orderProductCount",
                key: "orderProductCount",
                render: (text) => text || 0,
              },
              {
                title: "总计",
                dataIndex: "orderPriceTotal",
                key: "orderPriceTotal",
                render: (text) => <React.$price price={text || 0} />,
              },
            ],
            productType:false
          })
          return {
            ...v,
            productData
          }
        }
        let resultSkuArr = skuAttribute.map(value => value.value)
        return {
          ...v,
          productSkuJson,
          sku: resultSkuArr.join(","),
        }
      })
      const productData = orderDetailList;
      const receiving = [
        {
          title: "收货人",
          value: dataSource.memberName,
        },
        {
          title: "联系电话",
          value: dataSource.memberPhone,
        },
        {
          title: "收货地址",
          value: dataSource.memberAddress,
        },
      ];
      this.setState({
        dataSource,
        detailsData,
        productData,
        receiving,
      });
    }
  };
  getOrderState = (value) => {
    let label = null;
    switch (value) {
      case "3":
        label = <span style={{ color: "#d9001b" }}>待付款</span>;
        break;
      case "4":
        label = <span style={{ color: "#f59a23" }}>待发货</span>;
        break;
      case "5":
        label = <span style={{ color: "#70b603" }}>待收货</span>;
        break;
      case "9":
        label = <span style={{ color: "#70b685" }}>交易成功</span>;
        break;
      case "0":
        label = <span style={{ color: "#c280ff" }}>交易关闭</span>;
        break;
      default:
        break;
    }
    return label;
  };
  getOrderStatus = (value) => {
    let num = 0;
    switch (value) {
      case "3":
        num = 0;
        break;
      case "4":
        num = 1;
        break;
      case "5":
        num = 2;
        break;
      case "9":
        num = 4;
        break;
      default:
        break;
    }
    return num;
  };

  render() {
    const { dataSource, detailsData, columns, productData, receiving,productType } =
      this.state;
    return (
      <>
        <div className={"p-layout-box order-details-box"}>
          <GoBack history={this.props.history} title={"订单详情"} />
          {dataSource && (
            <div className={"p-layout-content"}>
              <div className={"order-details-content"}>
                <div className={"order-details-title"}>订单概况</div>
                <ul className={"order-details-information"}>
                  {detailsData.map((v, i) => {
                    return (
                      <li className={"order-details-information-item"}>
                        <span className={"item-title"}>{v.title}</span>
                        <span className={"item-separated"}>:</span>
                        <span className={"item-value"}>{v.value}</span>
                      </li>
                    );
                  })}
                </ul>
              </div>
              {
                productData.length > 0 ? <div className={"order-details-content"} >
                  {productType ? <div className={"order-details-title"}>商品信息</div>:<div className={"order-details-title"}>服务信息</div>}

                  <Table
                    dataSource={productData}
                    columns={columns}
                    pagination={false}
                    summary={(pageData) => {
                      let totalOrderPriceTotal = 0;
                      let totalOrderProductCount = 0;
                      pageData.forEach(
                        ({ orderPriceTotal, orderProductCount }) => {
                          totalOrderPriceTotal += orderPriceTotal || 0;
                          totalOrderProductCount += orderProductCount || 0;
                        }
                      );
                      return (
                        <>
                          <Table.Summary.Row>
                            <Table.Summary.Cell colSpan={4}>
                            {productType ?<div style={{ textAlign: "center" }}>
                                {`共${totalOrderProductCount}件商品，总计`}
                                <React.$price price={totalOrderPriceTotal || 0} />
                                元
                              </div>:<div style={{ textAlign: "center" }}>
                                {`共${totalOrderProductCount}项服务，总计`}
                                <React.$price price={totalOrderPriceTotal || 0} />
                                元
                              </div>}
                            </Table.Summary.Cell>
                          </Table.Summary.Row>
                        </>
                      );
                    }}
                  />
                </div> : null
              }
              {productType?
              <div className={"order-details-content"}>
                <div className={"order-details-title"}>收货信息</div>
                <ul className={"order-details-receiving"}>
                  {dataSource.pickupWay === 'T' ? receiving.map((v, i) => {
                    return (
                      <li key={i} className={"order-details-receiving-item"}>
                        <span className={"item-title"}>{v.title}</span>
                        <span className={"item-separated"}>:</span>
                        <span>{v.value}</span>
                      </li>
                    );
                  }) : <li className={"order-details-receiving-item"}>
                    <span className={"item-title"}>预留手机号</span>
                    <span className={"item-separated"}>:</span>
                    <span>{dataSource.orderRemark}</span>
                  </li>}
                </ul>
              </div>:null}
            </div>
          )}
        </div>
      </>
    );
  }
}

export default Details;
